<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/ui.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <script type="text/javascript" src="js/plugin.js"></script>
    <link rel="stylesheet" type="text/css" href="plugin/weui/lib/weui.css" />
    <link rel="stylesheet" type="text/css" href="plugin/weui/css/jquery-weui.css" />
    <link rel="stylesheet" type="text/css" href="plugin/weui/css/dl-weui.css" />
    <script type="text/javascript" src="plugin/weui/js/jquery-weui.js"></script>
</head>

<body>

    <div id="box1" class="container">
        <p class="draggable">DL手机版构建工具</p>

    </div>

    <div id="box2">
        <div class="target-container">
            <div class="html-wrap ">
                <div class="droppable phone-screen">
                    
                </div>
            </div>
        </div>
    </div>
    
    <div id="btn-groups">
        <a href="javascript:showHtml();" >获取HTML</a>
        <a>下载</a>
    </div>
    
    <div id="model" class="weui-popup__container popup-bottom">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
          <textarea id="html-editor"></textarea>
          <a class='weui-btn weui-btn_primary close-popup'>关闭窗口</a>
      </div>
    </div>
    
    <input type="file" id="file" accept="image/*" style="display:none;" />

    <script type="text/javascript">
        //自动生成ID
        var auto_id = 0;
        //图片替换对象
        var img_doc = null;
        function showHtml(){
            var html = $(".phone-screen").html();
            var editor = $("#html-editor");
            editor.text(html);
            $("#model").popup();
            var range = document.createRange();
            range.selectNodeContents(editor[0]);
            var selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand("copy");
        }
        
        function plugin_init() {
            console.log("plugin init");
            var wrap = $("#box1");
            for (var i in plugin) {
                var item = plugin[i];
                if (typeof (item.child) == "undefined") {
                    console.log()
                    wrap.append("<dl><dt class='draggable' pid='" + i + "'>" + item.text + "</dt></dl>");
                } else {
                    var dl = $("<dl></dl>")
                    dl.append("<dt pid='" + i + "'>" + item.text + "</dt>");
                    for (var j = 0; j < item.child.length; j++) {
                        dl.append("<dd class='draggable' pid='" + j + "'>" + item.child[j].text + "</dd>")
                    }
                    console.log(item.text);
                    console.log(dl.html());
                    wrap.append(dl);
                }
            }
        }
        
        function dropable_bind($obj){
            $obj.droppable({
                accept: ".draggable",
                helper: "clone",
                hoverClass: "droppable-active",
                greedy: true,
                drop: function (event, ui) {
                    event.stopPropagation();
                    event.preventDefault();
                    console.log(event);
                    var obj = $(ui.draggable);
                    var id = obj.attr("pid");
                    var item;
                    if (obj[0].localName == 'dt') {
                        item = plugin[id];
                    } else {
                        var dt_id = obj.siblings("dt").attr("pid");
                        item = plugin[dt_id]['child'][id];
                    }
                    var html = item.html;
                    auto_id++;
                    html = html.replaceAll("$ID$", "ID_" + auto_id);
                    var droppable_obj = $(html);
                    $(this).append(droppable_obj);
                    iscroll.refresh();
                    //插入面板时绑定事件
                    if(id == "panel"){
                        console.log("panel bind droppable")
                        dropable_bind(droppable_obj);
                    }
                    //面板插入控件时，移除drop-helper
                    if($(this).hasClass("weui-cells")){
                        $(this).find(".drop-helper").remove();
                    }

                }
            }).sortable()
        }
        var iscroll = new IScroll(".html-wrap", {
            scrollbars: true,
            mouseWheel: true,
        });
        $(function () {
            plugin_init();

            $(".draggable").draggable({
                appendTo: "body",
                helper: "clone"
            });

            dropable_bind($(".droppable"));
            
            //阻止右键
//            document.oncontextmenu = function (event) {
//             event.preventDefault();
//            };
            $(document.body).delegate("[contenteditable]",'contextmenu', function(e){
                e.preventDefault();
            });
            //图片替换
            $(document.body).delegate(".editable-img","contextmenu", function(e){
                e.preventDefault();
                img_doc = this;
                $("#file").click();
            })
            
            //图片预览
            $("#file").change(function(){
                var reader = new FileReader();
                reader.readAsDataURL(this.files[0]);
                reader.onload = function(e){
                    console.log("img load");
                    $(img_doc).attr("src", e.target.result);
                }
            });
        });
    </script>
</body>

</html>